@use "styles/Radius.module.scss";
@use "styles/ScreenSizes.module.scss";
@use "styles/Spacings.module.scss";
@use "styles/Typography.module.scss";
@use "styles/ZIndexes.module.scss";

.knowledge_item_wrapper {
  padding-inline: Spacings.$spacing06;
  overflow: hidden;
  display: flex;
  gap: Spacings.$spacing02;
  justify-content: space-between;
  align-items: center;
  border: 1px solid var(--border-0);
  padding-block: Spacings.$spacing03;
  position: relative;
  overflow: visible;
  font-size: Typography.$small;
  border-bottom: none;

  &.last {
    border-radius: 0 0 Radius.$normal Radius.$normal;
    border-bottom: 1px solid var(--border-0);
  }

  &:hover {
    background-color: var(--background-1);
    cursor: pointer;
  }

  .left {
    display: flex;
    align-items: center;
    gap: Spacings.$spacing03;
    overflow: hidden;

    .file_name {
      @include Typography.EllipsisOverflow;
    }
  }

  .right {
    display: flex;
    gap: Spacings.$spacing09;
    align-items: center;

    .status {
      width: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .options_modal {
    position: absolute;
    right: Spacings.$spacing02;
    top: Spacings.$spacing08;
    z-index: ZIndexes.$modal;
    padding-bottom: Spacings.$spacing01;
  }
}
